<style>
    *, html {
        margin: 0;
        padding: 0;
    }

    #capture {
        width: 400px;
        padding: 20px 30px;
        font-size: 14px;
    }

    .flex {
        display: flex;
    }

    .flex-1 {
        flex: 1;
    }

    .avatarurl {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }

    .text-center {
        text-align: center;
    }

    .qrcode-a{
        margin: 10px;
        padding-top: 20px;
    }
    .qrcode {
        width: 125px;
        height: 125px;
    }

    .tag {
        font-size: 12px;
        padding: 3px 10px;
        text-align: center;
        background-color: #ff9900;
        color: #ffffff;
        border-radius: 4px;
        margin-right: 10px;
        margin-top: 15px;
    }

    .card {
        border-radius: 50px;
        border: 2px solid #ebeef5;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1);
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 30px;
    }

    .name {
        font-size: 16px;
        font-weight: bold;
        margin-top: 6px;
        margin-bottom: 10px;
    }

    .number {
        font-size: 13px;
        color: #474646;
    }

    .statistics {
        margin-top: 15px;
        margin-bottom: 3px;
    }

    .statistics p {
        font-size: 13px;
        margin-top: 4px;
    }

    .intro {
        text-indent: 30px;
        margin-top: 15px;
    }

    .stars {
        margin-top: 15px;
        display: flex;
        align-items: center;
    }
    .stars p{
        margin-right: 10px;
    }

    .star {
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }
    .qrcode-h{
        font-weight: bold;
        margin-bottom: 10px;
    }
    .qrcode-t{
        padding-top: 10px;
    }
    .qrcode-t p{
        color: #474646;
        font-size: 13px;
    }
</style>
<div id="capture">
    <div class="text-center">有我在，为您提供最优性价比的国际寄运服务！</div>
    <div class="card">
        <div class="flex">
{{--            <img class="avatarurl" src="http://www.huilianyi.local/storage/upload/1.jpg">--}}
            <div>
                <div class="name">深圳好运来国际物流有限公司</div>
                <div class="number">慧连号：HD55434500</div>
            </div>
        </div>
        <div class="flex text-center statistics">
            <div class="flex-1">
                <div>23</div>
                <p>专属顾客</p>
            </div>
            <div class="flex-1">
                <div>234</div>
                <p>年订单</p>
            </div>
            <div class="flex-1">
                <div>23.42万</div>
                <p>年营业额</p>
            </div>
            <div class="flex-1">
                <div>1.2万</div>
                <p>进行中订单额</p>
            </div>
        </div>
        <div class="flex">
            <div class="tag">优选货代</div>
            <div class="tag">优选货代</div>
            <div class="tag">优选货代</div>
            <div class="tag">优选货代</div>
        </div>
        <div class="stars">
            <p>服务指数</p>
            <p>90</p>
{{--            <img class="star" src="http://www.huilianyi.local/images/star-red.jpg">--}}
{{--            <img class="star" src="http://www.huilianyi.local/images/star-red.jpg">--}}
{{--            <img class="star" src="http://www.huilianyi.local/images/star-red.jpg">--}}
{{--            <img class="star" src="http://www.huilianyi.local/images/star-red.jpg">--}}
{{--            <img class="star" src="http://www.huilianyi.local/images/star.jpg">--}}
        </div>
        <div class="intro">
            专业做东南亚航线，兼顾欧美加专线，快递。价格实惠，服务周到。
        </div>
    </div>
    <div class="flex qrcode-a">
        <div class="flex-1 text-center">
{{--            <img class="qrcode" src="http://www.huilianyi.local/storage/upload/1.jpg">--}}
        </div>
        <div class="flex-1 qrcode-t">
            <div class="qrcode-h">专属小程序码</div>
            <div class="qrcode-h">长按识别保存图片</div>
            <p>本名片由 慧连易运 生成</div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
    $(function () {
        createImg();
    });

    function createImg() {
        let dom = document.querySelector("#capture");
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        canvas.width = dom.offsetWidth * 2;
        canvas.height = dom.offsetHeight * 2;
        var width = dom.offsetWidth;
        var height = dom.offsetHeight;
        context.scale(2, 2);
        window.html2canvas(dom, {
            scale: 2,
            canvas: canvas,
            width: width,
            height: height,
            useCORS: true,
        }).then(function (canvas) {
            var context = canvas.getContext('2d');
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            $.ajax({
                url: "",
                type: "POST",
                data: {base64_img: encodeURIComponent(canvas.toDataURL())},
                success: function (data) {
                    window.parent.postMessage({
                        method: "create",
                        content: data.data
                    }, "*");
                },
                error: function (error) {

                }
            })
        });
    }
</script>
